<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>问卷查询</span>
      </div>
    </template>
    <div>
    <router-link to="/Fillin">
    <el-button>返回问卷填写</el-button>
    </router-link>
    </div>
    <!-- 查询部分 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="查询内容">
        <el-input v-model="formInline.content" :placeholder="formInline.region === 'title' ? '请输入问卷标题' : '请输入用户姓名'" clearable />
      </el-form-item>
      <el-form-item label="查询类别">
        <el-select v-model="formInline.region" placeholder="请选择想要查询的类别" clearable>
          <el-option label="问卷标题" value="title" />
          <el-option label="发布者" value="username" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据展示 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="问卷id" />
      <el-table-column prop="title" label="问卷标题" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column fixed="right" label="操作" min-width="80">
        <template #default="scope">
          <el-button type="success" size="small" @click="openFillBtn(scope.row.id,this.$router)">问卷填写</el-button>
          <el-button type="info" size="small" @click="openStatisticsBtn(scope.row.id,this.$router)">查看统计</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
  </el-card>
</template>

<script>
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import request from '../../utils/request';
import router from '../../router/router';

export default {
  setup() {
    const formInline = ref({
      content: '', // 查询具体内容
      region: '', // 查询类别
    });

    const tableData = ref([]);

    const load = async () => {
      const config = {
        method: 'get',
        url: 'api/survey/search',
      };
      try {
        const response = await request(config);
        if (response.code === '200') {
          console.log('222');
        } else {
          console.log('111');
        }
        if (response.data) {
          tableData.value = response.data.map(item => {
            const { status, userId, description, ...rest } = item;
            return rest;
          });
        }
      } catch (error) {
        console.error(error);
      }
    };

    onMounted(() => {
      load();
    });

    const openFillBtn = async (id,router) => {
      console.log(id);
      try {
        const response = await request.get('api/survey/open',
          {params:{
            id:id,
          }},
        );
        console.log(response.data);
        if (response.code === '200') {
          ElMessage.success('打开成功！');
          localStorage.setItem("questionnairedID", response.data.id);
          console.log("questionnairedID",response.data.id);
          //router.push('/Fillin');
          router.push(`/Fillin/${response.data.id}`);
        } else {
          ElMessage.error('打开失败！');
        }
      } catch (err) {
        console.log(err);
      }
    };

    const openStatisticsBtn = async (id,router) => {
      console.log(id);
      try {
        const response = await request.get('api/survey/getStatistic', {params:{ id:id }});
        console.log(response.data);
        localStorage.setItem('staticsId', response.data.id);
        router.push('/Statistics');
        if (response.code === "200") {
          localStorage.setItem('staticsId', response.data.id);
          ElMessage.success('打开成功！');
          console.log(staticsId);
          router.push('/Statistics');
        } else {
          ElMessage.error('打开失败！');
          //router.push('/Statistics');
        }
      } catch (err) {
        console.log(err);
      }
    };

    const onReset = () => {
      formInline.value.content = '';
      formInline.value.region = '';
      formInline.value.published = false;
      load();
    };

    const onSubmit = async () => {
      let params = {};
      if (formInline.value.region === 'title') {
        params = {
          title: formInline.value.content,
        };
      } else if (formInline.value.region === 'username') {
        params = {
          title: '',
          username: formInline.value.content,
        };
      }
      console.log('Sending GET request with params:', params);
      try {
        const response = await request.get('api/survey/search', { params });
        console.log('Received data from server:', response.data);
        if (response.data) {
          tableData.value = response.data.map(item => {
            const { status, userId, description, ...rest } = item;
            return rest;
          });
        }
      } catch (error) {
        console.error(error);
      }
    };

    return {
      formInline,
      tableData,
      openFillBtn,
      openStatisticsBtn,
      onReset,
      onSubmit,
    };
  },
};
</script>

<style scoped>
.card-header {
  text-align: center;
}
</style>
